function convert(input) { alert('Error. Contact us if this keeps happening.'); document.getElementById('modal-contact').classList.add('show'); } window.ctMaxUploadFiles = 1; var _blurState = { image: null, fileName: 'image', outMime: 'image/png', outExt: '.png', rects: [], drawing: null, scale: 1 }; function _blurDetect(blob) { var mime = (blob && blob.type ? blob.type.toLowerCase() : ''); if (mime === 'image/jpeg') { _blurState.outMime = 'image/jpeg'; _blurState.outExt = '.jpg'; } else if (mime === 'image/webp') { _blurState.outMime = 'image/webp'; _blurState.outExt = '.webp'; } else { _blurState.outMime = 'image/png'; _blurState.outExt = '.png'; } } function _blurRedraw() { var stage = document.getElementById('blur-stage'); if (!stage || !_blurState.image) return; var ctx = stage.getContext('2d'); ctx.clearRect(0, 0, stage.width, stage.height); ctx.drawImage(_blurState.image, 0, 0, stage.width, stage.height); ctx.save(); ctx.strokeStyle = 'rgba(45,122,45,0.9)'; ctx.lineWidth = 2; ctx.setLineDash([6, 4]); ctx.fillStyle = 'rgba(45,122,45,0.18)'; _blurState.rects.forEach(function(r) { ctx.fillRect(r.x, r.y, r.w, r.h); ctx.strokeRect(r.x, r.y, r.w, r.h); }); if (_blurState.drawing) { var d = _blurState.drawing; ctx.fillRect(d.x, d.y, d.w, d.h); ctx.strokeRect(d.x, d.y, d.w, d.h); } ctx.restore(); } function _blurFitStage() { var stage = document.getElementById('blur-stage'); if (!stage || !_blurState.image) return; var wrap = stage.parentElement; var maxWidth = wrap ? wrap.clientWidth - 28 : 720; if (maxWidth < 200) maxWidth = 720; var maxHeight = Math.min(560, Math.max(280, Math.floor(window.innerHeight * 0.55))); var img = _blurState.image; var scale = Math.min(maxWidth / img.naturalWidth, maxHeight / img.naturalHeight, 1); if (!isFinite(scale) || scale <= 0) scale = 1; _blurState.scale = scale; stage.width = Math.max(1, Math.round(img.naturalWidth * scale)); stage.height = Math.max(1, Math.round(img.naturalHeight * scale)); } function _blurStagePoint(e) { var stage = document.getElementById('blur-stage'); var rect = stage.getBoundingClientRect(); return { x: Math.max(0, Math.min(stage.width, e.clientX - rect.left)), y: Math.max(0, Math.min(stage.height, e.clientY - rect.top)) }; } function _blurBind() { var stage = document.getElementById('blur-stage'); if (!stage || stage._blurBound) return; stage._blurBound = true; var anchor = null; stage.addEventListener('pointerdown', function(e) { if (!_blurState.image) return; anchor = _blurStagePoint(e); _blurState.drawing = { x: anchor.x, y: anchor.y, w: 0, h: 0 }; try { stage.setPointerCapture(e.pointerId); } catch (err) {} e.preventDefault(); }); stage.addEventListener('pointermove', function(e) { if (!anchor || !_blurState.drawing) return; var p = _blurStagePoint(e); _blurState.drawing.x = Math.min(anchor.x, p.x); _blurState.drawing.y = Math.min(anchor.y, p.y); _blurState.drawing.w = Math.abs(p.x - anchor.x); _blurState.drawing.h = Math.abs(p.y - anchor.y); _blurRedraw(); }); function endDraw() { if (_blurState.drawing && _blurState.drawing.w > 4 && _blurState.drawing.h > 4) { _blurState.rects.push(_blurState.drawing); } _blurState.drawing = null; anchor = null; _blurRedraw(); } stage.addEventListener('pointerup', endDraw); stage.addEventListener('pointercancel', endDraw); stage.addEventListener('pointerleave', function() { if (_blurState.drawing && (_blurState.drawing.w > 4 && _blurState.drawing.h > 4)) endDraw(); }); } function processFile(blob, fileName) { _blurState.fileName = fileName || 'image'; $('#file-drop-zone').addClass('collapsedDropZone'); (function(){ var $b=$('#file-drop-zone .upload-file-button'); var l=$b.data('change-label'); if(l) $b.text(l); })(); _blurDetect(blob); _blurState.rects = []; _blurState.drawing = null; var img = new Image(); img.onload = function() { _blurState.image = img; var ws = document.getElementById('blur-workspace'); if (ws) ws.style.display = 'block'; _blurFitStage(); _blurBind(); _blurRedraw(); }; img.onerror = function() { alert('Could not decode this image file.'); }; img.src = URL.createObjectURL(blob); } function _blurApply() { if (!_blurState.image) { alert('Drop an image first.'); return; } var mode = document.getElementById('blur-mode').value; var strength = parseInt(document.getElementById('blur-strength').value, 10); if (!isFinite(strength)) strength = 20; var iw = _blurState.image.naturalWidth, ih = _blurState.image.naturalHeight; var full = document.createElement('canvas'); full.width = iw; full.height = ih; var fctx = full.getContext('2d'); fctx.drawImage(_blurState.image, 0, 0, iw, ih); var scale = _blurState.scale || 1; _blurState.rects.forEach(function(r) { var fx = Math.round(r.x / scale); var fy = Math.round(r.y / scale); var fw = Math.round(r.w / scale); var fh = Math.round(r.h / scale); if (fw < 1 || fh < 1) return; if (mode === 'black') { fctx.fillStyle = '#000'; fctx.fillRect(fx, fy, fw, fh); } else if (mode === 'pixelate') { var blockBase = Math.max(2, Math.round((strength / 60) * Math.max(fw, fh) / 6)); var smallW = Math.max(1, Math.round(fw / blockBase)); var smallH = Math.max(1, Math.round(fh / blockBase)); var temp = document.createElement('canvas'); temp.width = smallW; temp.height = smallH; var tctx = temp.getContext('2d'); tctx.imageSmoothingEnabled = false; tctx.drawImage(full, fx, fy, fw, fh, 0, 0, smallW, smallH); fctx.save(); fctx.imageSmoothingEnabled = false; fctx.drawImage(temp, 0, 0, smallW, smallH, fx, fy, fw, fh); fctx.restore(); } else { var temp2 = document.createElement('canvas'); temp2.width = fw; temp2.height = fh; var tctx2 = temp2.getContext('2d'); tctx2.drawImage(full, fx, fy, fw, fh, 0, 0, fw, fh); fctx.save(); if ('filter' in fctx) { fctx.filter = 'blur(' + strength + 'px)'; fctx.drawImage(temp2, fx, fy); } else { var iters = Math.max(2, Math.round(strength / 4)); var down = document.createElement('canvas'); var dw = Math.max(2, Math.round(fw / iters)); var dh = Math.max(2, Math.round(fh / iters)); down.width = dw; down.height = dh; down.getContext('2d').drawImage(temp2, 0, 0, dw, dh); fctx.imageSmoothingEnabled = true; fctx.drawImage(down, 0, 0, dw, dh, fx, fy, fw, fh); } fctx.restore(); } }); var quality = (_blurState.outMime === 'image/jpeg' || _blurState.outMime === 'image/webp') ? 0.95 : undefined; full.toBlob(function(out) { if (!out) { alert('Could not encode the output image.'); return; } var base = (_blurState.fileName || 'image').replace(/\.[^.]+$/, ''); add_file_output(URL.createObjectURL(out), base + '-blurred' + _blurState.outExt); }, _blurState.outMime, quality); } function _blurInit() { var strength = document.getElementById('blur-strength'); var strLabel = document.getElementById('blur-strength-label'); var mode = document.getElementById('blur-mode'); if (strength && strLabel) { strength.addEventListener('input', function() { strLabel.textContent = strength.value; }); } if (mode) { mode.addEventListener('change', function() { var row = document.getElementById('blur-strength-row'); if (row) row.style.display = mode.value === 'black' ? 'none' : ''; }); } var undo = document.getElementById('blur-undo'); if (undo) undo.addEventListener('click', function() { _blurState.rects.pop(); _blurRedraw(); }); var clear = document.getElementById('blur-clear'); if (clear) clear.addEventListener('click', function() { _blurState.rects = []; _blurRedraw(); }); var apply = document.getElementById('blur-apply'); if (apply) apply.addEventListener('click', _blurApply); window.addEventListener('resize', function() { if (!_blurState.image) return; _blurFitStage(); _blurRedraw(); }); } document.addEventListener('DOMContentLoaded', _blurInit); if (document.readyState !== 'loading') _blurInit(); var _loadedScripts = {}; function loadScriptPromise(url) { if (_loadedScripts[url]) return _loadedScripts[url]; _loadedScripts[url] = new Promise(function (resolve, reject) { var s = document.createElement('script'); s.src = url; s.onload = resolve; s.onerror = reject; document.head.appendChild(s); }); return _loadedScripts[url]; } function replaceAll(find, replace, str) { return str.replace(new RegExp(find, 'g'), replace); } function beautify(str) { var result = ''; var length = str.length; var i = 0; var braceCountLeft = 0; var braceCountRight = 0; var withinQuotes = false; while (i < length) { var c = str[i]; if (c == '"' && (i == 0 || c[i - 1] != '\\')) { // non-escaped quotes withinQuotes = !withinQuotes; } if (!withinQuotes && (c == '}' || c == '{' || c == ',')) { console.log('Start####' + result); // look back and remove carriage returns and whitespace that are already there var resultIndex = result.length - 1; while (resultIndex >= 0 && (result[resultIndex] == ' ' || result[resultIndex] == '\r' || result[resultIndex] == '\n' || result[resultIndex] == '\t')) { resultIndex = resultIndex - 1; result = result.substr(0, resultIndex + 1); console.log('char ' + result[resultIndex] + '-----' + result + 'zzz ' + result.length + ' ' + resultIndex); } if (c == '{') { braceCountLeft++; result += c + '\r' + GetTabs(braceCountLeft - braceCountRight); } else if (c == '}') { braceCountRight++; // precede with carriage return result += '\r' + GetTabs(braceCountLeft - braceCountRight) + c; } else if (c == ',') { result += c + '\r' + GetTabs(braceCountLeft - braceCountRight); } var nextChar = ''; // advance through whitespace and remove carriage returns that are already there while (i < length && (str[i + 1] == ' ' || str[i + 1] == '\r' || str[i + 1] == '\n' || str[i + 1] == '\t')) { i++; } } else { result += str[i]; } i++; } return result; } function GetTabs(count) { var result = ''; for (var i = 0; i < count; i++) { result += ' '; } return result; }